<template>
  <div class="bgc">
    <div class="container">
      <div class="artist-nav">
        <div class="nav-item">
          <h2>推荐</h2>
          <ul class="topnav">
            <li><a href="">推荐歌手</a></li>
            <li><a href="">入驻歌手</a></li>
          </ul>
          <div>
            <ul>
              <h2>华语</h2>
              <li><a href="">华语男歌手</a></li>
              <li><a href="">华语女歌手</a></li>
              <li><a href="">华语组合/乐队</a></li>
            </ul>
          </div>
          <div>
            <ul>
              <h2>欧美</h2>
              <li><a href="">欧美男歌手</a></li>
              <li><a href="">欧美女歌手</a></li>
              <li><a href="">欧美组合/乐队</a></li>
            </ul>
          </div>
          <div>
            <ul>
              <h2>日本</h2>
              <li><a>日本男歌手</a></li>
              <li><a>日本女歌手</a></li>
              <li><a>日本组合/乐队</a></li>
            </ul>
          </div>
          <div>
            <ul>
              <h2>韩国</h2>
              <li><a>韩国男歌手</a></li>
              <li><a>韩国女歌手</a></li>
              <li><a>韩国组合/乐队</a></li>
            </ul>
          </div>
          <div>
            <ul class="bottom">
              <h2>其他</h2>
              <li><a>其他男歌手</a></li>
              <li><a>其他女歌手</a></li>
              <li><a>其他组合/乐队</a></li>
            </ul>
          </div>
        </div>
      </div>
      <div class="artist-menu">
        <div class="settle-title">
          <h3>
            <span>入驻歌手</span>
          </h3>
          <p><a href="">更多></a></p>
        </div>
        <div class="settle-outer">
          <div class="artist-flex">
            <div
              class="foreach"
              v-for="artist in artistlist.slice(0, 10)"
              :key="artist.id"
            >
              <div>
                <img
                  :src="artist.picUrl"
                  alt=""
                  @click="handleToArtistPlay(artist.id)"
                />
              </div>
              <p>
                <span class="likeA" @click="handleToArtistPlay">{{
                  artist.name
                }}</span>
              </p>
            </div>
          </div>
        </div>
        <div class="hot-title">
          <h3>
            <span>热门歌手</span>
          </h3>
        </div>
        <div class="hot-outer">
          <div class="artist-flex">
            <div class="artist-flex">
              <div
                class="foreach"
                v-for="artist in artistlist.slice(10, 20)"
                :key="artist.id"
              >
                <div>
                  <img
                    :src="artist.picUrl"
                    alt=""
                    @click="handleToArtistPlay(artist.id)"
                  />
                </div>
                <p>
                  <span class="likeA" @click="handleToArtistPlay">{{
                    artist.name
                  }}</span>
                </p>
              </div>
            </div>
          </div>
          <div class="hot-bottom">
            <div class="hot-bottom-flex">
              <div
                class="small"
                v-for="artist in artistlist.slice(0, 90)"
                :key="artist.id"
              >
                <span class="likeA" @click="handleToArtistPlay(artist.id)">{{
                  artist.name
                }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Artist',
  data() {
    return {
      toplist: {},
      artistlist: [],
      id: null
    }
  },
  async mounted() {
    this.toplist = await this.$API.artist.reqGetAtist()
    this.artistlist = this.toplist.list.artists
  },
  methods: {
    handleToArtistPlay(id) {
      // console.log(id);
      this.$router.push({ name: 'ArtistPlay', query: { id: id } })
      // this.$router.replace({ path: '/artistplay', query: { id: id } })
    }
  }
}
</script>

<style scoped>
html,
body,
.bgc,
.container {
  height: 100%;
}

.bgc {
  /* height: 1350px; */
  width: 100%;
  background: #f5f5f5;
}

.container {
  width: 1000px;
  min-height: 700px;
  height: 1500px;
  margin: 0 auto;
  display: flex;
}

.hot-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px dotted #000;
}

.container .hot-bottom-flex {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.container .hot-bottom-flex .small {
  width: 130px;
  height: 30px;
}

.container .artist-menu {
  width: 818px;
  height: 1418px;
  padding: 40px;
  background-color: white;
  border: 1px solid #ccc;
}
.container .artist-menu h3 {
  font-size: 24px;
  font-weight: normal;
}
.container .artist-menu p {
  height: 31px;
  line-height: 31px;
}
.container .artist-menu .settle-title p a {
  display: block;
  height: 31px;
  padding-top: 10px;
}

.container .artist-menu .settle-title,
.hot-title {
  display: flex;
  justify-content: space-between;
  border-bottom: 2px solid #c20c0c;
  padding-bottom: 10px;
}

.container .artist-menu .hot-outer,
.settle-outer {
  height: 360px;
}

.container .artist-menu .artist-flex {
  padding-top: 20px;
  height: 360px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.artist-flex img {
  width: 130px;
  height: 130px;
}

.artist-flex img:hover {
  cursor: pointer;
}

.container .artist-nav {
  width: 180px;
  border: 1px solid #ccc;
}

.container .artist-nav .nav-item {
  padding: 0 10px 40px;
  margin-top: 50px;
}

.container .artist-nav .nav-item div {
  margin: 5px 0 0;
  padding-left: 40px;
  padding-top: 16px;
}

.likeA:hover {
  text-decoration: underline;
  cursor: pointer;
}

.topnav {
  padding-left: 40px;
}

.container .artist-nav .nav-item ul {
  list-style-type: square;
  border-bottom: 1px solid #ccc;
}
.container .artist-nav .nav-item ul.bottom {
  border-bottom: 0;
}
.container .artist-nav .nav-item ul li {
  height: 29px;
  line-height: 29px;
}
</style>
